<style type="text/css">
    .menuAdd {
    }

    .menuAddTree {
        display: none;
    }

    .menuAddTree .menuName {
        cursor: pointer;
    }
</style>
<@com.toolbar />
<div class="panel panel-default">
    <div class="panel-heading">菜单添加</div>
    <div class="panel-body form-horizontal menuAdd">
        <div class="form-group">
            <label class="col-sm-2 control-label">名　称：</label>
            <div class="col-sm-4"><input class="form-control" type="text" name="name" regx="${check.name}"/></div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">父级菜单：</label>
            <div class="col-sm-4">
                <input type="hidden" name="parentId" value="${parentId}" nullable/>
                <button type="button" class="btn btn-default parentName" onClick="$('.menuAddTree').dialog('open')" title="点击选择父级菜单"></button>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">地　址：</label>
            <div class="col-sm-6"><input class="form-control" type="text" name="url" regx="${check.url}"/></div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">优先级：</label>
            <div class="col-sm-2"><input class="form-control" type="number" name="index" regx="${check.index}"/></div>
        </div>
        <div class="menuAddTree">
            <div id="MENU_ROOT" pid="">
            <span class="menuName" title="">
                <span class="icon-libreoffice"></span>
                <span class="name" onClick="choseParent('');$('.menuAddTree').dialog('close')">根级菜单</span>
            </span>
            </div>
        <#list menus as m>
            <div id="${m._id}" pid="${m.parentId!"MENU_ROOT"}">
            <span class="menuName" title="${m.notes!""}">
                <span class="icon-libreoffice"></span>
                <span class="name" onClick="choseParent('${m._id}');$('.menuAddTree').dialog('close')">${m.name}</span>
            </span>
            </div>
        </#list>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function (e) {
        var menuAddTree = $('.menuAdd .menuAddTree').jTree();
        menuAddTree.showAll();
        choseParent('${parentId}');
        dialog('.menuAddTree', {
            autoOpen: false,
            modal: true,
            title: "选择父级菜单"
        });
        LC.initToolbarAdd();
    });
    function choseParent(pid) {
        if (pid == '') {
            pid = 'MENU_ROOT';
        }
        var parent = $('#' + pid);
        if (parent.length == 0) {
            parent = $('[pid=MENU_ROOT]');
        }
        $('.menuAdd .parentName').text(parent.find('.name:first').text());
        if (parent.attr('id') == 'MENU_ROOT') {
            $('input[name=parentId]').val('');
        } else {
            $('input[name=parentId]').val(parent.attr('id'));
        }
    }
</script>